<template>
  <div id="load">
    <div class="page-loadmore" :style="{'-webkit-overflow-scrolling': scrollMode}">
      <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
        <v-loadmore :top-method="loadTop"
                    :bottom-method="loadBottom"
                    :bottom-all-loaded="allLoaded"
                    :auto-fill="false"
                    ref="loadmore">

          <ul class="page-loadmore-list">
            <li class="page-loadmore-listitem" v-for="(val, key) in pageList">{{val.name}}</li>
          </ul>
        </v-loadmore>
      </div>
    </div>
  </div>
</template>


<script>
  import { Loadmore } from 'mint-ui'

  export default {
    data: function () {
      return {
        wrapperHeight: 0,
        pageList: [
          {name: 'zhangsan', age: 20},
          {name: 'a', age: 20},
          {name: 'b', age: 20},
          {name: 'c', age: 20},
          {name: 'd', age: 20},
          {name: 'e', age: 20},
          {name: 'f', age: 20},
          {name: 'g', age: 20},
          {name: 'h', age: 20},
          {name: 'i', age: 20},
          {name: 'j', age: 20},
          {name: 'lisi', age: 18}
        ],
        allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      }
    },
    components: {
      // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
      'v-loadmore': Loadmore
    },
    mounted () {
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
    },
    methods: {
      loadTop: function () {
        // 组件提供的下拉触发方法
        // 下拉加载
        // 固定方法，查询完要调用一次，用于重新定位
        var temp = this.$refs.loadmore
        var pageList = this.pageList
        var tempThis = this
        setTimeout(() => {

          for (var i = 0; i < 10; i++) {
            var item = {name: 'zhangsan' + i, age: 20}
            pageList.unshift(item)
          }

          tempThis.$nextTick(function () {
            // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，
            // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，
            // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好
            tempThis.scrollMode = 'touch'
          })

          temp.onTopLoaded()
        }, 3000)
      },
      loadBottom: function () {
        // 上拉加载
        var temp = this.$refs.loadmore
        var pageList = this.pageList
        var tempThis = this

        setTimeout(() => {
          for (var i = 0; i < 10; i++) {
            var item = {name: 'lisi' + i, age: 20}
            pageList.push(item)
          }

          tempThis.$nextTick(function () {
            // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，
            // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，
            // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好
            tempThis.scrollMode = 'touch'
          })

          temp.onBottomLoaded()// 固定方法，查询完要调用一次，用于重新定位
        }, 3000)
      },
      isHaveMore: function (isHaveMore) {
        // 是否还有下一页，如果没有就禁止上拉刷新
        this.allLoaded = true // true是禁止上拉加载
        if (isHaveMore) {
          this.allLoaded = false
        }
      }
    }
  }
</script>

<style scoped>

  ::-webkit-scrollbar {
    display: none
  }

  .page-loadmore-list {
    padding: 0px;
    margin: 0px;
  }

  .page-loadmore-listitem {
    height: 80px;
    line-height: 80px;
    text-align: center;
    list-style-type: none;
    border-bottom: 1px solid gray;
  }

  .page-loadmore-wrapper {
    overflow: scroll;
  }

</style>
